<template>
  <!-- 组排版 -->
  <div class="tree-node-small-custom-card" :style="cardStyle">
    <div
      @click="expentNumberList"
      class="top-number"
      id="overlay"
      v-if="shouldReturnTrue(node.data.childNumber, node.data.childIndex)"
      :style="circleStyle(node.data.childNumber)"
      style="
        height: 40px;
        width: 40px;
        cursor: pointer;
        background-color: rgb(33, 60, 141);
        color: white;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid white;
      "
    >
      {{ node.data.childNumber }}
    </div>
    <div
      v-for="(item, index) in data"
      :key="index"
      class="node-group odd"
      ref="boxes"
      :class="{
        key: index === data.length - 1
        // key1: route.fullPath === '/home' && index === data.length - 1,
      }"
      :style="groupStyle"
    >
      <basicsCard :state="item" @handle-add-children="handleClickAddChildren" />

      <div v-if="!item.isHaveChildren" :style="emptyChildStyle"></div>
      <div :style="oddBeforeStyle" class="node-group-odd-before"></div>
      <div v-if="index === data.length - 1" :style="keyAfterStyle" class="key-after"></div>
      <!-- <div v-if="route.fullPath !== '/home' && index === data.length - 1" :style="key1AfterStyle" class="key1-after"></div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { useRoute } from "vue-router";

import basicsCard from "./basicsCard.vue";

const route = useRoute();
const boxes = ref([]); // 用于存储 box 的引用
// 使用 inject 并提供类型

const getNode = inject<() => Node>("getNode");
const node = getNode?.();
const data = ref([]);
const emits = defineEmits(["handleExpandNumberView", "handleClickAddChildrenSmall"]);

if (node && node.data && node.data.type === "smallCustom") {
  data.value = node.data.children;
}
const shouldReturnTrue = (childNumber, childIndex) => {
  if (childNumber % 2 === 1) {
    // 如果 childNumber 是奇数，检查 childIndex 是否为中位数
    return childIndex === (childNumber + 1) / 2;
  } else {
    // 如果 childNumber 是偶数，检查 childIndex 是否为第一个中位数
    return childIndex === childNumber / 2;
  }
};
const expentNumberList = () => {
  emits("handleExpandNumberView", node);
};
const handleClickAddChildren = data => {
  emits("handleClickAddChildrenSmall", data);
};

// 定义动态样式
const cardStyle = {
  position: "relative",
  width: "100%",
  display: "flex",
  flexWrap: "wrap",
  borderLeft: "2px solid #8f8f8f",
  paddingLeft: "30px",
  marginLeft: "224px"
};

const circleStyle = childNumber => ({
  borderRadius: "50%",
  zIndex: "1000",
  width: "40px",
  height: "40px",
  position: "absolute",
  top: "-135px",
  left: `${childNumber % 2 === 1 ? 244 : 527}px`
});

const groupStyle = {
  position: "relative",
  marginBottom: "20px",
  width: "100%",
  display: "flex",
  flexWrap: "wrap"
};

const emptyChildStyle = {
  height: "40px",
  marginTop: "20px"
};

const oddBeforeStyle = {
  content: "",
  position: "absolute",
  top: "50%",
  left: "-30px",
  width: "32px",
  height: "2px",
  backgroundColor: "#8f8f8f"
};

const keyAfterStyle = {
  content: "",
  position: "absolute",
  top: "50%",
  right: "-50px",
  left: "-35px",
  height: "150px",
  backgroundColor: "rgba(255, 255, 255, 1)",
  width: "7px",
  zIndex: "2"
};

const key1AfterStyle = {
  content: "",
  position: "absolute",
  top: "50.6%",
  right: "-50px",
  left: "-35px",
  height: "156px",
  backgroundColor: "#eff0f5",
  width: "7px",
  zIndex: "2"
};
</script>
